import React from "react";
import { createStyles } from "antd-style";
import tipImgUrl from "./img/tip.png";

const ChangeBrowser: React.FC = () => {
  const { styles } = useStyle();

  return (
    <div className={styles.changeBrowser}>
      <div className="container">
        <div className="item">您的浏览器版本太低了，请升级浏览器</div>
        <div className="item">推荐使用：谷歌、火狐或其他双核极速模式</div>
        <div className="item">如果您使用的是360、搜狗、QQ等双核浏览器，请在最顶部切换到极速模式访问</div>
        <img className="tip" src={tipImgUrl} />
      </div>
    </div>
  )
}

export default ChangeBrowser;

const useStyle = createStyles(({ css }) => ({
  changeBrowser: css`
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .container{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        & > .item{
          font-size: 20px;
          font-weight: 500;
        }
        
        & > .tip{
          width: 250px;
          height: 200px;
        }
    }
  `
}))
